<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
        }
        .news{
            border: 1px solid black;
            width: 400px;
        }
        .news img{
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="app">
        <h4>v-text 和 v-html</h4>
        <!-- 
        v-text 和 v-html 指令通过执行vue封装方法【transformVText，transformVHtml】实现标签的内容覆盖填充
            + v-text 调用 textContent 实现功能
                => 效果等效于 插值表达式 {{}}
                => 使用规则等同于插值表达式 {{}}
                => v-text 是覆盖填充，插值表达式是拼接填充
            + v-html 调用 innerHTML 实现功能
                => 使用时如果变量取值为一个符合html规则的字符串，会将字符串转换为html标签进行覆盖填充
                => 使用规则等同于插值表达式 {{}}
        -->
        <p>info:{{ info }}</p>
        <p v-text="info">info:</p>
        <p v-text="'info:'+info"></p>
        <p v-html="htmlTemp"></p>
        <!-- <div style="border: 1px solid black;width: 400px;">{{ newsTemp }}</div> -->
        <div class="news" v-html="newsTemp"></div>
        <hr>
        <h4>v-pre 和 v-once</h4>
        <!-- 
            v-pre 和 v-once 均属于 boolean 类型指令，无=取值
            v-pre 和 v-once 指令用于控制，定义该指的标签中的 vue模板语法的相关功能
                + v-pre 让定义标签执行时跳过vue模板语法的解析
                + v-once 让定义标签第一次执行时完成模板语法解析,后续执行时跳过vue模板语法的解析
        -->
        <p>msg:{{ msg }}</p>
        <p v-pre>
            在vue模板语法中,通过插值表达式语法可以完成仓库变量的写入;<br>
            插值表达式语法为 <span style="color:red">{{ 变量|表达式|内置对象|匿名变量 }}</span> <br>
            <input type="button" value="提示事件" v-on:click="showTip()">
        </p>
        <p>
            在vue模板语法中,通过插值表达式语法可以完成仓库变量的写入;<br>
            插值表达式语法为 <span style="color:red" v-pre>{{ 变量|表达式|内置对象|匿名变量 }}</span> <br>
            <input type="button" value="提示事件" v-on:click="showTip()">
        </p>
        <p>msg:{{ msg }}</p>
        <p v-once>
            msg:{{ msg }} <br>
            <span :style=" `color:${c}` " >测试属性绑定</span> <br>
            <input type="button" value="提示事件" v-on:click="showTip()">
        </p>
        <input type="button" value="changeMsg()" v-on:click="changeMsg()">
    </div>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../assets/vue3/vue.esm-browser.js"
        createApp({
            data(){
                return {
                    info:"info文本变量",
                    htmlTemp:"<span style='color:red'>标签字符串</span>",
                    newsTemp:"<p style=\"text-align: center;\"><img src=\"https://oa.itany.com/itmupload/1645663883070.jpg\" title=\"图⽚无法加载\" alt=\"图⽚无法加载\"/></p><p style=\"text-align: center;\"><br/></p><p style=\"text-align: center;\"><strong><span style=\"font-size: 20px;\">热烈欢迎无锡中科软信息技术有限公司莅临我校招聘人才</span></strong></p><p><br/></p><p style=\"margin: 0px 0px 25px; text-indent: 0px; line-height: 150%; background: rgb(255, 255, 255); text-align: center;\"><span style=\"font-family: 宋体;color: rgb(51, 51, 51);letter-spacing: 0;font-size: 16px\"><span style=\"font-family:宋体\">无锡中科软信息技术有限公司创立于</span><span style=\"font-family:宋体\">2005年，由原中科院软件所和江苏中科软件改制重组而成。公司长期专注于电子政务应用软件及整体解决方案的研发和服务，是国内领先的电子政务应用软件开发服务商，是政府认定的“江苏省软件企业”、“江苏省民营高新技术企业”、“双软企业”，公司先后通过质量管理体系ISO9001、信息安全管理ISO27001、IT服务管理体系ISO20000、软件能力成熟度模型CMMI ML3级等国际标准的资质认证。</span></span></p><p style=\"margin: 0px 0px 25px; text-indent: 0px; line-height: 150%; background: rgb(255, 255, 255); text-align: center;\"><span style=\"font-family: 宋体;color: rgb(51, 51, 51);letter-spacing: 0;font-size: 16px\"><span style=\"font-family:宋体\">公司自主研发的产品先后获得计算机软件著作权</span><span style=\"font-family:宋体\">39项、江苏省优秀软件“金慧奖”1项、科技部创新项目1项、发明专利1项、在报发明专利2项。</span></span></p><p style=\"text-align: center;\"><br/></p>",
                    msg:"msg仓库变量",
                    c:"red"
                }
            },
            methods:{
                showTip(){
                    alert("showTip")
                },
                changeMsg(){
                    this.msg = Math.random();
                    this.c = this.c=="red"?"blue":'red';
                }
            }
        }).mount("#app")
    </script>
</body>
</html>